<template>
	<div class="requirements">
		<div id="vip-xp" class="vip-box" @click="goDetails('rewards-vip-xp')">
			<p class="title app-font-heavy">
				{{ $t('rewards.vipRequirements.title') }}
			</p>
			<p class="sub-title app-font-heavy">
				{{ $t('rewards.vipRequirements.subtitle') }}
			</p>
			<div class="light-box">
				<div class="light-image-wrap">
					<img
						src="@/assets/img/activity/vip-requirements/light-purple.svg"
						alt=""
						class="light-image" />
				</div>
				<img src="@/assets/img/activity/vip-requirements/vip-xp.png" alt="" class="vip-image" />
			</div>
			<div class="vip-content app-font-heavy">
				<p
					v-if="activityStore.upgradeRule.vip.sport.right"
					v-html="
						$t('rewards.vipRequirements.sportsStake', {
							amount: fmtAmount(activityStore.upgradeRule.vip.sport.left, {
								useName: true,
								precision: [0, true]
							}),
							xp: activityStore.upgradeRule.vip.sport.right
						})
					" />
				<p
					v-if="activityStore.upgradeRule.vip.slot.right"
					v-html="
						$t('rewards.vipRequirements.slotsStake', {
							amount: fmtAmount(activityStore.upgradeRule.vip.slot.left, {
								useName: true,
								precision: [0, true]
							}),
							xp: activityStore.upgradeRule.vip.slot.right
						})
					" />
				<p
					v-if="activityStore.upgradeRule.vip.casino.right"
					v-html="
						$t('rewards.vipRequirements.casinoStake', {
							amount: fmtAmount(activityStore.upgradeRule.vip.casino.left, {
								useName: true,
								precision: [0, true]
							}),
							xp: activityStore.upgradeRule.vip.casino.right
						})
					" />
			</div>
		</div>
		<div id="vip-xp-boost" class="box-item">
			<!--<ComingSoon />-->
			<div class="item-content">
				<img src="@/assets/img/activity/vip-requirements/vip-xp-boost.png" alt="" />
				<p class="text-yellow app-font-heavy">
					{{ $t('rewards.vipRequirements.xpBoost') }}
				</p>
				<!--<p>{{ $t('rewards.vipRequirements.xpBoostContent1') }}</p>-->
				<!--				<p>{{ $t('rewards.vipRequirements.xpBoostContent3') }}</p>-->
				<p>
					<!--					{{ $t('rewards.vipRequirements.xpBoostContent2') }}-->
					<span>[{{ $t('rewards.vipRequirements.comingSoon') }}]</span>
				</p>
			</div>
		</div>
		<div id="vip-transfer" class="box-item vip-transfer">
			<div class="item-content">
				<img src="@/assets/img/activity/vip-requirements/vip-transfer.png" alt="" />
				<p class="text-yellow app-font-heavy">
					{{ $t('rewards.vipRequirements.vipTransfer') }}
				</p>
				<i18n-t keypath="rewards.vipRequirements.vipTransferContent" scope="global">
					<template #livechat>
						<p @click.stop="customerService()" class="link-live-chat cursor-pointer">
							{{ $t('rewards.vipRequirements.liveChat') }}
						</p>
					</template>
				</i18n-t>
			</div>
		</div>
		<div id="vip-xp-required" class="xp-required">
			<p class="title">{{ $t('rewards.vipRequirements.xpRequired') }}</p>
			<div class="xp-box">
				<div v-for="item in config?.vip" :key="item._id" class="xp-item">
					<p class="xp-value">{{ toAmount(item._absoluteGrowth) }}</p>
					<p>XP</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { useActivityStore, useAppStore } from '@/store'
import { customerService, fmtAmount, goDetails, toAmount } from '@/utils'

const activityStore = useActivityStore()
const appStore = useAppStore()
const config: any = computed(() => activityStore.config)
watch(
	() => appStore.region,
	() => activityStore.getUpgradeRule('vip'),
	// () => store.dispatch('rewards/getUpgradeRule', 'vip'),
	{ immediate: true }
)
</script>

<style lang="scss" scoped>
.requirements {
	padding: 10px 17px 69px;
	.text-yellow {
		color: var(--color-text-f);
	}
	.vip-box {
		background: linear-gradient(180deg, #260b62 0.5%, #313f54 100%);
		height: 351px;
		width: 280px;
		border-radius: 10px;
		margin: 0 auto;
		padding: 24px 18px;
		text-align: center;
		.title {
			color: var(--color-white);
			font-size: 14px;
			line-height: 16.8px;
		}
		.sub-title {
			min-height: 38.4px;
			color: var(--color-text-f);
			font-size: 16px;
			line-height: 19.2px;
		}
		.light-box {
			position: relative;
			width: 100%;
			.light-image-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				inset: 0;
			}
			.light-image {
				width: 280px;
				pointer-events: none;
				//animation: auto-rotate 5s linear infinite;
			}
			.vip-image {
				position: relative;
				display: block;
				width: 250px;
				margin: auto;
			}
		}
		.vip-content {
			width: max-content;
			margin: 4px auto 0;
			font-size: 14px;
			line-height: 22px;
			text-align: right;
			color: var(--color-white);
			position: relative;
			z-index: 1;
		}
	}
	.box-item {
		background: linear-gradient(180deg, #840c88 0%, #471a5c 29.72%, #3d2755 69.06%, #8f2092 100%);
		width: 280px;
		min-height: 200px;
		border-radius: 10px;
		margin: 10px auto;
		position: relative;
		.item-content {
			text-align: center;
			font-size: 10px;
			line-height: 16px;
			padding: 16px;
			color: var(--color-white);
			img {
				width: 250px;
			}
		}
	}

	.vip-transfer.box-item {
		background: linear-gradient(180deg, #7b240b 0%, #551a1d 30.41%, #412935 69.75%, #68482f 100%);
		.item-content {
			padding: 16px;
		}
	}
	.xp-required {
		.title {
			text-align: center;
			padding: 7px 0 12px;
		}
		.xp-box {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 8px;
			.xp-item {
				background-color: var(--color-bg-2);
				text-align: center;
				padding: 8px;
				font-size: 12px;
				color: var(--color-text-3);
				border-radius: 4px;
				.xp-value {
					color: var(--color-text-2);
				}
				p {
					line-height: 16.8px;
				}
				.my-image {
					width: 40px;
					height: 40px;
					object-fit: scale-down;
				}
			}
		}
	}
}

.link-live-chat {
	color: var(--color-text-f);
	text-decoration: underline;
	text-underline-offset: 2px;
	background: transparent;
	border: none;
	box-shadow: none;
}

:deep(.text-yellow) {
	padding: 2px 0 3px;
	font-size: 14px;
	color: var(--color-text-f);
}
</style>
